<template>
  <div class="body">
    <div class="main">
      <Header :navList="navList" />
      <div class="content">
        <div class="list-content">
          <div style="margin: 35px 0;font-size: 36px;text-align: center">院首长信箱</div>
          <el-divider></el-divider>
          <div style="padding: 24px;display: flex;justify-content: center">
            <el-form :model="form" ref="form" :rules="rules" label-width="100px">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" style="width: 500px" />
              </el-form-item>
              <el-form-item label="邮箱" prop="mail">
                <el-input v-model="form.mail" style="width: 500px" />
              </el-form-item>
              <el-form-item label="电话" prop="tel">
                <el-input v-model="form.tel" style="width: 500px" />
              </el-form-item>
              <el-form-item label="内容" prop="content">
                <el-input type="textarea" :rows="8" v-model="form.content" style="width: 500px" />
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" style="background-color:#102F7A;border: #102F7A" @click="handleSubmit">提交</el-button>
                <el-button class="btn-reset" @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  </div>

</template>

<script>
import {getList, insertMailboxApi} from "@/api/home";
import Footer from "@/templates/Layout/Footer.vue";
import Header from "@/templates/Layout/MoreHeader.vue";
import { getBubbleSort } from "@/util/util";

export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      search: '',
      form: {
        name: '',
        mail: '',
        tel: '',
        content: ''
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        mail: [{ required: true, message: "请输入", trigger: "blur" }],
        tel: [{ required: true, message: "请输入", trigger: "blur" }],
        content: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      navList: []
    }
  },
  mounted() {
    this.getList()
  },


  methods: {
    async getList(){
      const res = await getList()
      this.navList = this.getNavBarList(res.navList, res.orgList)
    },
    getNavBarList(nav, org) {
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      // const a = getBubbleSort(nav[0].children)
      return nav[0].children.sort(getBubbleSort('order', 1))
    },
    async handleSubmit(){
      this.$refs.form.validate(async (valid) => {
        if(valid){
          await insertMailboxApi(this.form)
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.$refs.form.resetFields();
        }
      })
    },
    handleReset(){
      this.$refs.form.resetFields();
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  width: 100%;
  height: 100%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.list-content {
  min-height: calc(100vh - 210px - 60px - 60px - 48px);
  width: 1200px;
  background: #fff;
}
</style>
